import React, { useState } from 'react';

function InputBox(props) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    props.onInputSubmit(inputValue);
    setInputValue('');
  };

  const handleCancel = () => {
    props.onInputCancel();
    setInputValue('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          {props.promptMessage}
          <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
        </label>
        <button type="submit">提交</button>
        <button type="button" onClick={handleCancel}>取消</button>
      </form>
    </div>
  );
}

export default InputBox;